<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>
<body>
<div id="app" v-clock>
  <h1>Name: {{ name }} (绑定v-once不会改变name)</h1>
  {{ message }}
  <template v-if="type === 'name'">
    <label>用户名：</label><input placeholder="输入用户名" key="name-input">
  </template>
  <template v-else>
    <label>邮箱：</label><input placeholder="输入邮箱" key="mail-input">
  </template>
  <button @click="handleToggleClick">切换输入类型</button>
  <ul>
    <!--<li v-for="(book, index) in books">{{index}} - {{book.name}}</li>-->
    <template v-for="book in filterBooks">
      <li>书名：{{ book.name }}</li>
      <li>作者：{{ book.author }}</li>
    </template>
  </ul>
  <span v-for="value in user">{{value}} </span>
  <a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">打开链接</a>
  <div id="obj1" @click="doc">
    obj1
    <div id="obj2" @click.self="doc">
      obj2
      <div id="obj3" @click="doc">
        obj3
      </div>
    </div>
  </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      name: 'alin',
      message: '这是一段文本',
      type: 'name',
      books: [
        {
          name: '《Vue.js》实战',
          author: '梁灏'
        },
        {
          name: '《JavaScript 语言精髓》',
          author: 'Crockford'
        },
        {
          name: '《JavaScript 高级程序设计》',
          author: 'C.Zakas'
        }
      ],
      user: {
        name: 'Aresn',
        gender: '男',
        age: 26
      },
      id: ''
    },
    mounted () {
      let that = this
      that.es6Rest()
      // that.es6StringTemplate()
      // that.es6ArrayFrom()
    },
    computed: {
      filterBooks: function () {
        return this.books.filter(function (book) {
          return book.name.match(/JavaScript/)
        })
      }
    },
    methods: {
      doc () {
        this.id = event.currentTarget.id
        alert(this.id)
      },
      handleClick (message, event) {
        // event.preventDefault()
        window.alert(message)
      },
      /**
       * rest参数扩展（...args参数要放到最后）
       */
      es6Rest () {
        // 数组组合
        /*let arr = [1,2,3], arr0 = [6,7,8]
        arr.push(...arr0)
        console.log(arr)
        let str = 'prototype'*/
        // 也可以数组拷贝
        /*let copy = []
        copy = [...copy, ...arr]
        console.log(copy)*/
        console.log(Math.round(5/2))
      },
      /**
       * 模板字符串
       */
      es6StringTemplate () {
        // let str = `ES6引入了一种新型的字符串字面量语法`
        // let str0 = 'ES6引入了一种新型的字符串字面量语法'
        // console.log(str == str0)
        let newStr = 'ECMAScript'
        let str = `ES6引入了一种新型的${ newStr }字符串字面量语法`
        let str0 = 'ES6引入了一种新型的' + newStr + '字符串字面量语法'
        console.log(str == str0)
      },
      /**
       * Array.from方法用于将两类对象转为真正的数组：
       * 类似数组的对象（array-like object）
       * 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
       */
      es6ArrayFrom () {
        let obj = {
          '0': 1,
          '1': 2,
          '2': 3,
          length: 3
        }
        console.log(Array.from(obj))
        let str = 'Iterator'
        console.log(Array.from(str))
        let set = new Set([1, 2, 3])
        console.log(Array.from(set))
      },
      handleToggleClick () {
        this.type = this.type === 'name' ? 'mail' : 'name'
      }
    }
  });

  // app.books = app.books.filter(function (item) {
  //   return item.name.match(/JavaScript/);
  // })
  // app.$set(app.books, 4, {
  //   name: '《css揭秘》',
  //   author: '[希] Lea Verou'
  // })
  // app.books.splice(2, 1, {
  //   name: '《css揭秘》',
  //   author: '[希] Lea Verou'
  // })
</script>
</html>